<template>
    <div class="zh-container">
        <div class="right-title">
          <img src="../../../../assets/imgs/news/zhihu.png" alt="">
          <div>知乎·热搜榜</div>
        </div>
        <a href="https://www.zhihu.com/hot">
        <li v-for="(zh,index) in zhnews" :key="index">
            <div class="rank-icon">{{ zh.rank }}</div>
            <div class="news-content"><a :href="zh.url">{{zh.title}}</a></div>
            <div class="rank">{{zh.hotNum}}</div>
          </li></a>
    </div>
</template>

<script>
import { getZhNewsApi } from '@/api/spider'
export default{
    data(){
        return {
            zhnews:''
        }
    },
    methods:{
    async getNews(){
      await getZhNewsApi().then(res=>{
        this.zhnews = res.data.news
      })
    }
  },
  mounted(){
    this.getNews()
  }
}
</script>
<style lang="less" scoped>
.zh-container{
    .right-title{
        display: flex;
        padding: 0px 0px 10px 0px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--cardLine);
        margin-bottom: 10px;
        img{
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
        div{
          font-size: 24px;
          font-weight: bolder;
          color: var(--font_2);
        }
      }
      li{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .rank-icon{
          height: 24px;
          width: 24px;
          line-height: 24px;
          background-color: var(--bgColor);
          font-size: 14px;
          text-align: center;
          color: var(--font_2);
          border-radius: 4px;
          margin-right: 14px;
        }
        .news-content{
          width: 84%;
          font-size: 14px;
          line-height: 24px;
          overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          a{
            color: var(--font_2);
          }
          a:hover{
            color: #409eff;
            }
        }
        .rank{
          height: .6rem;
          font-size: 14px;
          line-height: .6rem;
          color: var(--font_2);
        }
      }
      
      li:nth-child(2) > .rank-icon{
        background-color:#fe2d46 ;
        
      }
      li:nth-child(3) > .rank-icon{
        background-color:#ff6600 ;
        
      }
      li:nth-child(4) > .rank-icon{
        background-color:#faa90e ;
      }
}

</style>